<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Travel Booking Website</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Mooli&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <header>
        <nav class="navbar">
            <div class="logo">
                <img src="logo-removebg-preview.png" alt="Logo">
            </div>

            <input type="checkbox" id="menu-toggle" />
            <label for="menu-toggle" class="menu-icon">
                <i class="fa-solid fa-bars"></i>
            </label>

            <ul class="nav-links">
                <li><a href="#">Flight+Hotel</a></li>
                <li><a href="#">Hotel & Homes</a></li>
                <li><a href="#">Flights</a></li>
                <li><a href="#">Coupons & Deals</a></li>
                <li><a href="#">Airport Transfer</a></li>
                <li><a href="#">Activities</a></li>
            </ul>

            <div class="nav-actions">
                <a href="./login.html" class="signin">Sign in</a>
                <a href="./create_account.html" class="account">Create Account</a>
                <a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
            </div>
        </nav>

        <div class="navbar2">
            <h1>"Explore More, Worry Less"</h1>
        </div>
    </header>

    <main>
        <div class="page1">
            <div class="heroimg">
                <div class="bookingpage">
                    <div class="bookingpagetop">
                        <h1>Book Right Away !</h1>
                    </div>
                    <div class="flight-booking">
                        <div class="trip-options">
                            <label><input type="radio" name="trip" checked> One Way</label>
                            <label><input type="radio" name="trip"> Round Trip</label>
                            <label><input type="radio" name="trip"> Multi City</label>
                        </div>

                        <div class="booking-grid">
                            <!-- Row 1 -->
                            <div class="form-group">
                                <label>From</label>
                                <select class="airport-select">
                                    <option selected>Delhi, DEL - Indira Gandhi International Airport</option>
                                    <option>Mumbai, BOM - Chhatrapati Shivaji International Airport</option>
                                    <option>Bangalore, BLR - Kempegowda International Airport</option>
                                    <option>Chennai, MAA - Chennai International Airport</option>
                                    <option>Kolkata, CCU - Netaji Subhash Chandra Bose International Airport</option>
                                    <option>Hyderabad, HYD - Rajiv Gandhi International Airport</option>
                                    <option>Pune, PNQ - Pune International Airport</option>
                                    <option>Ahmedabad, AMD - Sardar Vallabhbhai Patel International Airport</option>
                                    <option>Goa, GOI - Dabolim Airport</option>
                                    <option>Jaipur, JAI - Jaipur International Airport</option>
                                    <option>Lucknow, LKO - Chaudhary Charan Singh International Airport</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>To</label>
                                <select class="airport-select">
                                    <option selected>Search by place/airport</option>
                                    <option>Mumbai, BOM - Chhatrapati Shivaji International Airport</option>
                                    <option>Bangalore, BLR - Kempegowda International Airport</option>
                                    <option>Chennai, MAA - Chennai International Airport</option>
                                    <option>Kolkata, CCU - Netaji Subhash Chandra Bose International Airport</option>
                                    <option>Hyderabad, HYD - Rajiv Gandhi International Airport</option>
                                    <option>Pune, PNQ - Pune International Airport</option>
                                    <option>Ahmedabad, AMD - Sardar Vallabhbhai Patel International Airport</option>
                                    <option>Goa, GOI - Dabolim Airport</option>
                                    <option>Jaipur, JAI - Jaipur International Airport</option>
                                    <option>Lucknow, LKO - Chaudhary Charan Singh International Airport</option>
                                </select>
                            </div>

                            <!-- Row 2 -->
                            <div class="form-group">
                                <label>Departure</label>
                                <input type="date" class="date-input" value="2025-10-19">
                            </div>

                            <div class="form-group">
                                <label>Travellers</label>
                                <select class="traveller-select">
                                    <option>1 Passenger</option>
                                    <option>2 Passengers</option>
                                    <option>3 Passengers</option>
                                    <option>4 Passengers</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Pay with</label>
                                <select class="pay-select">
                                    <option>Cash</option>
                                    <option>Card</option>
                                    <option>UPI</option>
                                    <option>Net Banking</option>
                                </select>
                            </div>

                            <div class="form-group promo">
                                <label>Promo</label>
                                <div class="promo-box">
                                    <input type="text" placeholder="Add Promo Code">
                                    <button class="search-btn">Search</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="page2">
            <div class="heading">
                <h1>Top Destinations In India</h1>
            </div>
            <div class="places">
                <div class="city"><img src="delhi.jpg" id="places" />
                    <h4>Delhi</h4>
                </div>
                <div class="city"><img src="agra.jpg" id="places" />
                    <h4>Agra</h4>
                </div>
                <div class="city"><img src="jaipur.jpg" id="places" />
                    <h4>Jaipur</h4>
                </div>
                <div class="city"><img src="hyderabad.jpg" id="places" />
                    <h4>Hyderabad</h4>
                </div>
                <div class="city"><img src="banglore.jpeg" id="places" />
                    <h4>Bangalore</h4>
                </div>
                <div class="city"><img src="mumbai.jpg" id="places" />
                    <h4>Mumbai</h4>
                </div>
            </div>
        </section>
        <section class="page3">
            <div class="heading">
                <h1>Explore More Rentals Property</h1>
            </div>
            <div class="listhotels">
                <div class="hotels">
                    <img src="appartment.jpg" alt="">
                    <h4 class="type">Appartments</h4>
                </div>
                <div class="hotels">
                    <img src="bunglow.jpeg" alt="">
                    <h4 class="type">Bunglows</h4>
                </div>
                <div class="hotels">
                    <img src="privatevilla.jpg" alt="">
                    <h4 class="type">Private Villa</h4>
                </div>
                <div class="hotels">
                    <img src="vr2.jpg" alt="">
                    <h4 class="type">Vacation Rentals</h4>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <section class="page4">
            <div class="links">
                <ul>
                    <li>
                        <h4>Help</h4>
                    </li>
                    <li><a href="">Help center</a></li>
                    <li><a href="">FAQs</a></li>
                    <li><a href="">Privacy policy</a></li>
                    <li><a href="">Cookie policy</a></li>
                    <li><a href="">Terms of use</a></li>
                    <li><a href="">Manage cookie settings</a></li>
                </ul>

                <ul>
                    <li>
                        <h4>Company</h4>
                    </li>
                    <li><a href="">About us</a></li>
                    <li><a href="">Careers</a></li>
                    <li><a href="">Press</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">PointsMAX</a></li>
                </ul>
                <ul>
                    <li>
                        <h4>Destinations</h4>
                    </li>
                    <li><a href="">Countries/Territories</a></li>
                    <li><a href="">Cities</a></li>
                </ul>
                <ul>
                    <li>
                        <h4>Partner with us</h4>
                    </li>
                    <li><a href="">YCS partner portal</a></li>
                    <li><a href="">Partner Hub</a></li>
                    <li><a href="">Advertise on Website</a></li>
                    <li><a href="">Affiliates</a></li>
                    <li><a href="">Connectivity Partners</a></li>
                </ul>
                <ul>
                    <li>
                        <h4>Get the app</h4>
                    </li>
                    <li><a href="">iOS app</a></li>
                    <li><a href="">Android app</a></li>
                </ul>
            </div>
        </section>
        <section class="footer-bottom">
            <h4>---------- Made With <i class="fa-solid fa-heart fa-l" style="color: #ee7777;"></i> ----------</h4>
        </section>
    </footer>
</body>

</html>